<template>
  <div id="app">
    <h2>--- --- App内容：module --- ---</h2>
    <!-- 模块会放到state中去，所以能够点出来 -->
    <p>{{$store.state.moduleA.name}}</p>
    <button @click="updateName">修改名字</button>
    <p>{{$store.getters.fullName}}</p>
    <p>{{$store.getters.fullName2}}</p>
    <p>{{$store.getters.fullName3}}</p>
    <button @click="aUpdateName">异步修改名字</button>


    <h2>--- --- App内容：info对象是否改变 --- ---</h2>
    <button @click="updateInfo">修改信息</button>
    <p>{{$store.state.info}}</p>
    <h2>--- --- 下面是App --- ---</h2>
    <p>{{$store.state.counter}}</p>
    <!-- <button @click="$store.state.counter++">++</button>
    <button @click="$store.state.counter--">--</button>-->

    <button @click="addition">++</button>
    <button @click="subtraction">--</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>

    <h2>--- --- 下面是getters相关信息 --- ---</h2>
    <h2>2*：{{$store.state.counter * $store.state.counter}}</h2>
    <h2>powerCounter：{{$store.getters.powerCounter}}</h2>
    <h2>more18stu:{{$store.getters.more18stu}}</h2>
    <h2>more18stuLength:{{$store.getters.more20stuLength}}</h2>
    <h2>moreAgeStu:{{$store.getters.moreAgeStu(15)}}</h2>
    <h2>moreAgeStuLength:{{$store.getters.moreAgeStuLength(15)}}</h2>
    <button @click="addStu">添加一个学生</button>

    <h2>--- --- 下面是HelloVWorld --- ---</h2>
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import { INCREMENT, AUPDATEINFO } from "./store/mutations-types";

export default {
  name: "app",
  data() {
    return {
      message: "App"
    };
  },
  components: {
    HelloWorld
  },
  methods: {
    addition() {
      // this.$store.commit("increment");
      this.$store.commit(INCREMENT);
    },
    subtraction() {
      this.$store.commit("decrement");
    },
    addCount(count) {
      // 1.普通提交风格
      // this.$store.commit("incrementCount", count);
      // 2.另外一种带type属性的对象的提交风格
      const stu = { id: 1005, name: "allen", age: 30 };
      // 调用mutations里面的方法;
      this.$store.commit({
        type: "incrementCount",
        count,
        stu
      });
    },
    addStu() {
      const stu = { id: 1005, name: "allen", age: 30 };
      this.$store.commit("incrementStu", stu);
    },
    updateInfo() {
      // this.$store.commit({
      //   type: "updateInfo",
      //   name: "wayne"
      // });
      // 模仿异步调用actions里面的方法
      // this.$store.dispatch(AUPDATEINFO, {
      //   name: "wayne",
      //   success: () => {
      //     console.log("修改成功");
      //   }
      // });

      // Promise的写法
      this.$store
        .dispatch(AUPDATEINFO, {
          name: "wayne"
        })
        .then(result => {
          console.log(result);
        });
    },
    updateName(){
      this.$store.commit({
        type: 'updateName',
        name: 'kobbbb'
      })
    },
    aUpdateName(){
      this.$store.dispatch('aUpdateName')
    }
  }
};
</script>

<style>
button {
  display: block;
  padding: 0 2rem;
  height: 1.5rem;
  line-height: 1.5rem;
  border: 1px solid #ccc;
  margin-top: 0.5rem;
}
</style>
